<template>
	<view class="marquee_box" @touchstart='touchstartFn' @touchend='touchendFn' :style="'background:'+broadcastStylees.back_color+';'">
		<view class="" v-if="direction=='right'||direction=='left'" :style="'background:'+broadcastStylees.back_color+';'">
			<view class="marquee_container" :style="'background:'+broadcastStylees.back_color+';'">
				<view v-if="broadcastIconIsDisplay" class="broadIcon" :style="'background:'+broadcastStylees.back_color+';font-size:28upx;'">
					<view class="marquee_box_icon">
						<image src="/static/images/icon_notice.png" mode="widthFix"></image>
					</view>
					<text style="margin-left:12upx;">{{broadcast_tit}}</text>
				</view>
				<view class="boradcast_text_left_rig" :class='[direction=="left"?"marquee_text_left":direction=="right"?"marquee_text_right":"",animation_paused?"animation_pausedcss":""]'
				 :style="'background:'+broadcastStylees.back_color+';--marqueeWidth--:'+(-broadcastStylees.width_mal)+'px;--speed--:'+broadcastStylees.time+'s;width:'+broadcastStylees.width_mal+'px;'">
					<view v-for="(item,index) in broadcastDataes" @click.stop="click_event(index)" :key="index" :style="'background:'+broadcastStylees.back_color+';color:'+broadcastStylees.text_color+';margin-left:'+(index!=0?item.starspos:0)+'px;font-size:'+broadcastStylees.font_size+'upx;'">
						{{item.text}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				broadcastDataes: [],
				broadcastDataTopBtmDataes: [],
				broadcastStylees: {},
				animation_paused: false,
				qualifications:true
			}
		},
		props: {
			broadcastType: {
				type: String,
				default: 'text'
			},
			broadcastData: {
				type: Array
			},
			broadcastStyle: {
				type: Object,
				default () {
					return {
						speed: 90, //滚动速度，每秒3个字
						font_size: "28", //字体大小(upx)
						text_color: "#fff", //字体颜色
						back_color: "#815CD4", //背景色
					}
				}
			},
			broadcastIconIsDisplay: { //图标是否显示
				type: Boolean,
				default: false
			},
			broadcast_tit: {
				type: String,
				default: ''
			},
			direction: {
				type: String,
				default: 'left'
			},
			touchEvent: {
				type: true,
				default: false
			}

		},
		created() {
			if (this.broadcastType == "text") {
				if (this.direction == "right" || this.direction == "left") {
					this.initial_let_rig();
				} else {
					let arr = [...this.broadcastData];
					arr = arr.concat(arr);
					this.broadcastDataTopBtmDataes = arr;
				}
			}
		},
		mounted() {
			let that = this;
		},
		methods: {
			touchendFn(e) {
				if (this.touchEvent&&this.qualifications) {
					this.animation_paused = false;
				}
			},
			touchstartFn(e) {
				if (this.touchEvent&&this.qualifications) {
					this.animation_paused = true;
				}
			},
			initial_let_rig() {
				let broadcastData = [...this.broadcastData];
				// console.log(this.direction, 'this.direction')
				if (this.direction == "right") {
					broadcastData.reverse();
				}

				let ititdata = broadcastData.map((item) => {
						return {
							"text": item,
							"starspos": uni.getSystemInfoSync().windowWidth - 103
						}
					}),
					assist = { ...this.broadcastStyle
					},
					this_width = 0,
					spacing = 0,
					speed = (assist.speed * assist.font_size); //m每秒行走的距离

				for (let i in ititdata) {
					this_width += ititdata[i].text.length * assist.font_size;
					if (i != ititdata.length - 1) {
						spacing += ititdata[i].starspos
					}
				}
				let total_length = (this_width / 2) + spacing; //总长
				assist.time = total_length / speed; /**滚动时间*/
				assist.width_mal = total_length;
				this.broadcastDataes = ititdata;
				this.broadcastStylees = assist;
			},
			click_event(index){
				this.$emit("changeEvent",{index,msg:`你点击了${index+1}条`});
			}
		}
	}
</script>

<style>
	.marquee_box {
		width: 100%;
		overflow: hidden;
		position: inherit;
		height: auto;
	}
	.broadIcon {
		/* width: 60upx; */
		/* padding: 0 22upx; */
		height: 60upx;
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		left: 0;
		top: 0;
		color: #fff;
		z-index: 9;
		line-height: 60upx;
	}
	.marquee_container {
		position: relative;
		width: 100%;
		height: 60upx;
	}
	.marquee_text_left {
		display: flex;
		white-space: nowrap;
		animation-name: around_left;
		animation-duration: var(--speed--);
		animation-iteration-count: infinite;
		animation-timing-function: linear;
		line-height: 60upx;
		position: absolute;
	}
	@keyframes around_left {
		from {
			left: 100%;
		}
		to {
			left: var(--marqueeWidth--);
		}
	}
	.marquee_text_right {
		display: flex;
		white-space: nowrap;
		animation-name: around_right;
		animation-duration: var(--speed--);
		animation-iteration-count: infinite;
		animation-timing-function: linear;
		line-height: 60upx;
		position: absolute;
	}
	@keyframes around_right {
		from {
			right: 100%;
		}
		to {
			right: var(--marqueeWidth--);
		}
	}

	.marquee_tit {
		height: 60upx;
		line-height: 60upx;
	}

.marquee_box {
    width: 100%;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    border-bottom: 0 solid #dadada;
    background-color: #fff
}
.marquee_box .marquee_box_icon {
    width: 64upx;
    height: 64upx
}
.marquee_box .marquee_box_icon uni-image {
    width: 40upx;
	margin: 10upx;
}
.marquee_box uni-swiper {
    display: block;
    height: 54upx;
    width: 100%
}
.marquee_box uni-swiper uni-swiper-item {
    line-height: 64upx
}
.marquee_box uni-swiper uni-swiper-item uni-text {
    font-size: 28upx;
    line-height: 64upx;
    text-overflow: ellipsis;
    white-space: nowrap
}
</style>
